<script setup>
import {useUserStore} from "~/stores/user.js";

const userStore = useUserStore();

const emit = defineEmits(["isDeleted"]);
const props = defineProps({
    post: Object
});
const {post} = toRefs(props);

const runtimeConfig = useRuntimeConfig();
const isMenu = ref(false);
const isDeleting = ref(false);
const isLike = ref(false);

const client = useSupabaseClient();
const user = useSupabaseUser()

const hasLikeComputed = computed(() => {
    if (!user.value) return

    let res = false
    post.value.likes.forEach(like => {
        if (like.userId == user.value.identities[0].user_id && like.postId == post.value.id) res = true
    })

    return res
})

const deletePost = async (id, picture) => {
    let res = confirm("Are you sure you want to delete this post?")
    if (res) {
        try {
            isMenu.value = false
            isDeleting.value = true

            const { data, error } = await client.storage.from('threads-clone-files').remove([picture])
            await useFetch(`/api/delete-post/${id}`, { method: "DELETE" })
            emit("isDeleted", true)

            isDeleting.value = false
        } catch (error) {
            console.log(error)
            isDeleting.value = false
        }
    }else {
        return res
    }
}

const likePost = async (id) => {
    isLike.value = true
    try {
        await useFetch('/api/like-posts', {
            method: "POST",
            body: {
                postId: id,
                userId: user.value.identities[0].user_id
            }
        })
        await userStore.getAllPosts()
        isLike.value = false
    } catch (error) {
        console.log(error)
        isLike.value = false
    }
}

const unlikePost = async (id) => {
    isLike.value = true
    try {
        await useFetch(`/api/unlike-post/${id}`, { method: "DELETE" })
        await userStore.getAllPosts()
        isLike.value = false
    } catch (error) {
        console.log(error)
        isLike.value =false
    }
}

const likeFunc = ()=> {
    let likePostObj = null

    if (post.value.likes.length < 1) {
        likePost(post.value.id)
        return null
    }else {
        post.value.likes.forEach((like)=> {
            if (like.userId == user.value.identities[0].user_id && like.postId == post.value.id) {
                likePostObj = like
            }
        })
    }

    if (likePostObj) {
        unlikePost(likePostObj.id)
        return null
    }

    likePost(post.value.id)
}
</script>

<template>
    <div class="z-50 bottom-0 w-full h-full">
        <div class="py-2 w-full">
            <div class="flex justify-between items-center">
                <div class="flex items-center text-white">
                    <img :src="post.image" alt="" class="rounded-full h-[35px]">
                    <div class="ml-2 font-semibold text-[18px]">{{ post.name }}</div>
                </div>

                <div class="relative" @click="()=> isMenu = !isMenu"
                     v-if="user && user.identities && user.identities[0].user_id == post.userId">
                    <button :disabled="isDeleting" :class="isMenu ? 'bg-gray-800' : ''"
                            class="flex items-center text-white p-1 h-[24px] w-[24px] hover:bg-gray-800 rounded-full cursor-pointer">
                        <Icon name="bi:three-dots" v-if="!isDeleting" size="18" class="text-white"/>
                        <Icon name="eos-icons:bubble-loading" v-else size="18" class="text-white"/>
                    </button>

                    <div v-if="isMenu" class="absolute border border-gray-600 right-0 z-20 mt-1 rounded">
                        <button @click="deletePost(post.id, post.picture)" class="flex items-center rounded gap-2 text-red-500 justify-between bg-black w-full pl-4 pr-3 py-1 hover:bg-gray-900">
                            <div>Delete</div>
                            <Icon name="solar:trash-bin-trash-broken" size="20"/>
                        </button>
                    </div>
                </div>
            </div>

            <div class="relative flex items-center w-full">
                <div class="w-[42px] mx-auto">
                    <div class="absolute ml-4 mt-1 top-0 w-[1px] bg-gray-700 h-full"></div>
                </div>

                <div class="bg-black rounded-lg w-[calc(100%-50px)] text-sm w-full font-light">
                    <div class="py-2 text-gray-300">{{ post.text }}</div>
                    <img v-if="post && post.picture" class="mx-auto w-full mt-2 pr-2 rounded"
                         :src="runtimeConfig.public.bucketUrl + '/' + post.picture"
                         alt="">
                    <div class="absolute mt-2 w-full ml-2">
                        <button @click="likeFunc" :disabled="isLike" class="flex items-center gap-1">
                            <Icon name="mdi:cards-heart-outline" v-if="!hasLikeComputed"
                                  class="p-1 text-white hover:bg-gray-800 rounded-full cursor-pointer" size="28"/>
                            <Icon name="mdi:cards-heart" v-else
                                  class="p-1 text-red-500 hover:bg-gray-800 rounded-full cursor-pointer" size="28"/>
                        </button>
                        <div class="relative text-sm text-gray-500">
                            <div>
                                <span v-if="!isLike">{{ post.likes.length }}</span>
                                <span v-else>
                                    <Icon name="eos-icons:bubble-loading" class="text-white" size="13" />
                                </span>
                                likes
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="relative inline-block text-gray-500 pt-1 pb-1.5">
            <div class="flex items-center">
                <div class="flex items-center flex-wrap text-white gap-1 w-[42px]">
                    <div class="flex gap-0.5">
                        <img class="rounded-full h-[14px] mt-2" src="https://picsum.photos/id/202/50" alt="">
                        <img class="rounded-full h-[17px]" src="https://picsum.photos/id/223/50" alt="">
                    </div>

                    <div class="flex items-center">
                        <img class="rounded-full h-[11px] ml-4" src="https://picsum.photos/id/99/50" alt="">
                    </div>
                </div>
            </div>
        </div>

        <div class="h-[1px] bg-gray-800 w-full mt-3"></div>
    </div>
</template>

<style scoped>

</style>